import Expo from 'expo';
import React from 'react';
import { TabNavigator, StackNavigator,  } from 'react-navigation';
// import {View} from 'react-native';
import { Icon } from 'react-native-elements';
import NavigationService from '../utils/NavigationService';

// tabs
import Home from '../tabs/Home';
import Consultation from '../tabs/Consultation';
import Mine from '../tabs/Mine';
import Quotation from '../tabs/Quotation';
// import Search from '../tabs/Search';

const TabComponents = TabNavigator(
  {
    Home: {
      screen: Home,
      path: '/home',
      navigationOptions: {
        tabBarLabel: '首页',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
        tabBarOnPress:()=>{
          NavigationService.navigate('HomePage');
        },
        // title: '小牛行情',
        header: null
      },
    },
    Quotation: {
      screen: Quotation,
      path: '/quotation',
      navigationOptions: {
        tabBarLabel: '行情',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
        title: '行情'
      },
    },
    Consultation: {
      screen: Consultation,
      path: '/consultation',
      navigationOptions: {
        tabBarLabel: '咨询',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
        title: '咨询'
      },
    },
    Mine: {
      screen: Mine,
      path: '/mine',
      navigationOptions: {
        tabBarLabel: '我的',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
            size={30}
            type="material-community"
            color={tintColor}
          />
        ),
      },
    },
  },
  {
    initialRouteName: 'Home',
    animationEnabled: false,
    // tabBarComponent: (<View></View>),
    swipeEnabled: true,
    // Android's default option displays tabBars on top, but iOS is bottom
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: '#e91e63',
      // Android's default showing of icons is false whereas iOS is true
      showIcon: true,
    },
  }
);


// Workaround to avoid crashing when you come back on Components screen
// and you were not on the Buttons tab
export default StackNavigator(
  {
    ComponentsTabs: { screen: TabComponents },
  },
  {
    headerMode: 'none',
  }
);
